<template>
  <div class="stats-wrapper">
    <div class="stats-inner"  :style="innerStyle"  v-if="this.statsData.child"> 
      <Header :batchInfo="statsData.currentBatchTimeLine"></Header>
      <Footer></Footer>
      <div class="stats-box" style="width: 480px;height: 160px;left: 20px; top: 120px;">
        <div class="stats-box-title">考生参考人数</div>
        <div class="stats-box-body">
          本市已考试人数（人）{{statsData.finishedByNormalStuNum + statsData.finishedByResitStuNum}}<br />
          缺考人数（人）{{statsData.missedStuNum}}
        </div>
      </div>
      <div class="stats-box" style="width: 480px;height: 600px;left: 20px; top: 300px;">
        <div class="stats-box-title">各区县参考人数</div>
        <div class="stats-box-body">
          <div v-for="item,i in statsData.child" class="stats-text-list">
           <span> {{item.areaName}}</span>
           <span>{{item.confirmedStuNum}}人</span>
          </div>
        </div>
      </div>
      <div class="stats-box" style="width: 480px;height: 380px;right: 20px; top: 120px;">
        <div class="stats-box-title">各区县考生比例</div>
        <div class="stats-box-body">
          <echarts-rose-pie ref='erp' :areaData="statsData"></echarts-rose-pie>
        </div>
      </div>
      <div class="stats-box" style="width: 480px;height: 380px;right: 20px; top: 520px;">
        <div class="stats-box-title">各区县已考学生人数排行</div>
        <div class="stats-box-body" v-if="statsData.child">
          <div v-for="item,i in sortStatsData" v-if="i < 7" class="stats-text-list stats-rank" :key="i"  :rank-num="(i + 1) + '.'">
           <span >{{item.areaName}}</span>
           <span>{{item.finishedByNormalStuNum + item.finishedByResitStuNum}}人</span>
          </div>
        </div>
      </div>
      <div class="stats-box" style="width: 960px;height: 780px;left: 520px; top: 120px;">
        <div class="stats-box-title">宁波市科学实验考试进度</div>
        <div class="stats-box-body">
          <div style="position: absolute; left: 50px; top: 400px; font-size: 25px;">单位（人）</div>
          <div style="position: absolute; right: 50px; top: 380px; font-size: 25px; line-height: 1.3;text-align: left;">
            当前批考试人数<br /> <strong style="font-size:50px;">{{statsData.havingExamStuNum}}</strong>
          </div>
          <div class="stats-text">
            <div>
              <span>完成考试人数（人）</span><br>
              <strong>{{statsData.finishedByNormalStuNum + statsData.finishedByResitStuNum}}</strong>
            </div>
            <div>
              <span>未考人数（人）</span><br>
              <strong>{{statsData.waitingStuNum}}</strong>
            </div>
            <div>
              <span>补考人数（人）</span><br>
              <strong>{{statsData.notFinishedByResitStuNum + statsData.finishedByResitStuNum}}</strong>
            </div>
          </div>
          <div style="width: 400px;height: 500px;position: absolute; bottom: 30px;left: 260px;">
            <map-nb :areaData="statsData"> </map-nb>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import EchartsRosePie from '@/components/stats/EchartsRosePie.vue'
import MapNb from '@/components/stats/MapNb.vue'

import statsMixin from '@/common/mixins/statsMixin'

export default {
  mixins: [statsMixin],
  components: {
    EchartsRosePie,
    MapNb,
  },
  data () {
    return {
    }
  },
  mounted () {
  },
  methods: {
    setAreaData () {
      this.statsData = JSON.parse(sessionStorage.getItem('statsData'))
      this.sortStatsData = this.statsData.child.sort((a, b) => b.finishedByNormalStuNum - a.finishedByNormalStuNum)
    },
  }
}
</script>

<style scoped>

</style>
